<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :destroy-on-close="true"
    @close="handleClose"
  >
    <div
      ref="scrollBody"
      style="height: 100%"
    >
      <div style="height: 100%;width: 100%;padding-bottom: 15px">
        <div class="erp-page-form-body">
          <el-form
            ref="form"
            v-bind="$attrs"
            :model="form"
            @submit.native.prevent
            :label-width="labelWidth"
            v-on="$listeners"
          >
            <div
              v-for="(groupItem, groupIndex) in groupForm"
              :key="groupIndex"
              class="form-group erp-list__form"
            >
              <div
                v-for="(box, boxIndex) in groupItem.items"
                :key="boxIndex"
                class="form-box"
              >
                <div
                  v-if="box.title"
                  class="form-box-header"
                >
                  <span class="form-box-header-icon" /> {{ box.title }}
                </div>
                <el-row>
                  <template v-for="item in box.items">
                    <erp-item
                      :key="item.field"
                      :item="item"
                      :form-item-style="formItemStyle"
                      :form="form"
                      :query="query"
                      :label-width="labelWidth"
                      @update-field="handleUpdateField"
                      @value-change="handleValueChange"
                      @transmit-list="handleTransmitList"
                    >
                    </erp-item>
                  </template>
                </el-row>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue';
import ErpItem from '@/components/erp/ErpListForm/ErpItem';
import {cloneJson, generateGroupForm} from "../utils";
import {Col, Row, Dialog, Form} from "element-ui";

Vue.use(Row);
Vue.use(Col);
Vue.use(Dialog);
Vue.use(Form);

const staticViewField = [
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "门幅",
    "field": "doorWidth"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "克重",
    "field": "gweight"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "实测千米克重",
    "field": "realKmgWeight"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "花高",
    "field": "flowerHeight"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "花型",
    "field": "flowerType"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "规格型号",
    "field": "model"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "产品坯布米克重",
    "field": "mgWeightBlank"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "成品米克重",
    "field": "mgWeightProduct"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "织造损耗",
    "field": "weavingLoss"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "成品损耗",
    "field": "productLoss"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "坯布伸缩率",
    "field": "expansionRatio"
  },
  {
    "box": "规格参数",
    "viewType": "text",
    "title": "计算方式",
    "field": "calMethod"
  },
];
const DIRECTION = {
  TIMES: 10,
  DIV: 20
};
export default {
  name: "OrderQueryForm",
  components: {
    ErpItem
  },
  props: {
    title: {
      type: String,
    },
    visible: {
      type: Boolean,
      default: true
    },
    formConfigList: {
      type: Array,
      default: []
    },
    formItemStyle: {
    },
    isView:{
      type: Boolean,
      default: false
    },
    form: {},
    orderId: {},
    query: {},
    apiList:{},
    isNewRecord:{
      type: Boolean,
      default: true
    },
    labelWidth: {
      default: '100px'
    }
  },
  data () {
    return {
      formConfigListCom: [],
      showHelpTip1: false,
      unitList: [],
      fieldList: [],
      mainUnitId: null,
      subUnitId: null,
      formList: [],
    };
  },
  computed: {
    groupForm () {
      return generateGroupForm(this.formConfigListCom);
    },
    rules () {
      let rules = {};
      let formList = cloneJson(this.formConfigListCom);
      if (formList && formList.length > 0) {
        for (let i in formList) {
          let validates = formList[i].validate;
          if (validates && validates.length > 0) {
            rules[formList[i].field] = formList[i].validate;
          }
        }
      }
      return rules;
    },
    hiddenFormItem () {
      return function (item) {
        if (item.visibleFunction) {
          try{
            return new Function('form','field', 'query', item.visibleFunction )(this.form, item.field, this.query);
          }catch(e) {
            console.log(e);
          }
        }
        return true;
      };
    },
    block () {
      return function (item) {
        let times = item === undefined || item.col === undefined ? null : item.col.times;
        if(!times || isNaN(times) || times <= 0) {
          times = 1;
        }
        return times;
      };
    },
    labelWidthComp () {
      return function (item) {
        return item && item.col && item.col.labelWidth ? item.col.labelWidth : this.labelWidth;
      };
    },
    lineFeed () {
      return function (item) {
        let lineFeed = item === undefined || item.col === undefined ? null : item.col.lineFeed;
        if (lineFeed !== 'head' && lineFeed !== 'foot' && lineFeed !== 'all') {
          lineFeed = null;
        }
        return lineFeed;
      };
    },
    unitData () {
      const list = this.formList;
      const mainUnitId = this.mainUnitId;
      const subUnitId = this.subUnitId;
      if (list) {
        if (list.length) {
          // 若已有转换选项
          return list.filter(item => item.fromId != mainUnitId).map(item => {
            return {
              direction: item.direction,
              fromId: item.fromId,
              ratio: item.ratio,
              toId: item.toId,
            };
          });
        } else {
          // 若没有转换选项
          if (mainUnitId && subUnitId) {
            // 判断主从单位是否有选中
            if (mainUnitId == subUnitId) {
              // 若主从单位相同，返回空
              return [];
            } else {
              // 否则，默认生成一条转换值
              return [
                {
                  direction: DIRECTION.TIMES,
                  fromId: subUnitId,
                  ratio: 1,
                  toId: mainUnitId,
                }
              ];
            }
          }
        }
      }
      return [];
    },
  },
  watch: {
    /* "form.materialTypeId": {
        handler (materialTypeId, oldMaterialTypeId) {
            if (materialTypeId !== oldMaterialTypeId ) {
                let updateForm = false
                if (!this.isNewRecord && materialTypeId && oldMaterialTypeId === undefined) {
                    updateForm = true
                }
                this.getFormConfigListCom(materialTypeId, updateForm)
            }
        },
        immediate: true,
        deep: true
    }, */
    // "form.mainUnitId": {
    //   handler (e) {
    //     this.mainUnitId = e;
    //     this.formList = [];
    //   },
    //   immediate: true
    // },
    // "form.list": {
    //   handler (e) {
    //     this.formList = e;
    //   },
    //   immediate: true
    // },
    // "form.subUnitId": {
    //   handler (e) {
    //     this.subUnitId = e;
    //     this.formList = [];
    //   },
    //   immediate: true
    // },
    "form.dictItemIdSubClass": {
      handler (classId, oldClassId) {
        let updateForm = false;
        if (!this.isNewRecord && classId && oldClassId === undefined) {
          updateForm = true;
        }
        this.getFormConfigListCom(classId, updateForm);
      },
      immediate: true
    },
  },
  created () {
  },
  mounted() {
  },
  methods: {
    handleTransmitList ({options}) {
      this.unitList = options;
    },
    getFormConfigListCom (materialClassId, updateForm) {
      let formConfigList = cloneJson(this.formConfigList);

      if (materialClassId) {
        this.formConfigListCom = formConfigList;
        this.$emit('change-form', {formConfigList, updateForm});
      }else {
        this.formConfigListCom = formConfigList;
      }
    },
    handleUpdateField (data){
      this.$emit('update-field',data);
    },
    handleValueChange (data) {
      this.$emit('value-change', data);
    },
    handleChangeList (data) {
      let form = this.form;
      form.list = data.list;
      this.$emit('update:form', form);
    },
    handleClose () {
      this.$emit('close');
    },
  }
};
</script>

<style lang="less" scoped>
    
</style>
